<template>
  <div>
    <div class="title">
      修改个人信息
    </div>
    <!-- 头像图片区域 -->
    <van-uploader :after-read="afterRead" v-model="fileList" multiple :max-count="1" preview-size="150px" />
    <!-- 修改区域 -->
    <div class="modify">
      <input type="password" placeholder="新密码" v-model="user.password" />
      <input type="text" placeholder="新昵称" v-model="user.nickname" />
      <input type="text" placeholder="新手机号" v-model="user.mobile" />
      <button @click="submit">重置修改</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MobileModify',

  data() {
    return {
      // 图片
      fileList: [],
      user: {
        filePath: '',
        password: '',
        nickname: '',
        mobile: ''
      }
    }
  },

  mounted() {
    this.getUserIfon()
  },

  methods: {
    // 查询用户信息
    getUserIfon() {
      this.$get(this.$api.authInfo)
        .then(result => {
          console.log(result.data.data)
          // this.user = result.data.data
          this.user.nickname = result.data.data.nickname
          this.user.mobile = result.data.data.mobile
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 文件上传
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file.content)
      this.user.filePath = file.content
      // console.log(this.user.filePath)
    },
    // 提交函数
    submit() {
      this.$post(this.$api.authUpdateInfo, this.user)
        .then(result => {
          console.log(result.data)

          if (result.data.errno !== 0) {
            return
          }
          this.$router.push('/tabbar/user')
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  width: 100%;
  height: 5rem;
  text-align: center;
  position: relative;
  line-height: 5rem;
  > div {
    position: absolute;
    left: 0;
    top: 0;
  }
}
.van-uploader {
  margin: 8rem 0 2rem 12rem;
}
.modify {
  width: 70%;
  margin: auto;
  text-align: center;
  input {
    width: 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    margin-top: 2rem;
  }
  button {
    margin-top: 5rem;
    background: #ac956d;
    width: 100%;
    height: 4rem;
    color: #fff;
    border: none;
    border-radius: 50rem;
  }
}
</style>
